<template>
	<view>
		<view class="litBtnCom">
			<drag-button :isDock="true" @btnClick="toSetBlue"></drag-button>
			<!-- <view @click="toSetBlue">蓝牙</view> -->
		</view>
		<uni-popup ref="popup" :is-mask-click="false" type="center">
			<view class="contentBtn">
				<view class="closeIcon" @click="closeBlueFun">
					<uni-icons type="clear" size="30"></uni-icons>
				</view>
				<view style="padding: 25rpx">
					选中的设备：{{ selectDeviceObj.name }}
				</view>
				<view class="radioList">
					<uni-data-checkbox v-model="deviceId" @change="selectBlue" :localdata="deviceList"></uni-data-checkbox>
					<!-- <u-radio-group
            v-model="deviceId"
            wrap
            size="40"
            shape="square"
            @change="selectBlue">
            <u-radio
              v-for="(item, index) in deviceList"
              :key="index"
              :name="item.address">
              {{ item.name }}
            </u-radio>
          </u-radio-group> -->
					<view v-if="!deviceList || deviceList.length == 0" class="noMore">
						{{ msg }}
					</view>
				</view>
				<view style="display: flex; justify-content: space-between" class="tabBtn">
					<view @click="closeBlue">关闭连接</view>
					<view @click="reInitBlue">重新初始化</view>
					<view @click="printCode">测试打印</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as bter from '@/components/printCom/bter.js';
	import * as zksdk from '@/components/printCom/bluetoolth.js';
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton
		},
		name: 'blueTeethBtn',
		data() {
			return {
				deviceList: [],
				deviceId: null,
				selectDeviceObj: {},
				msg: '加载中，请稍后......',
			};
		},
		methods: {
			closeBlueFun() {
				this.$refs.popup.close();
			},
			toSetBlue() {
				this.$refs.popup.open();
				this.initBlue();
			},
			initBlue() {
				this.closeBlue();
				this.$nextTick(() => {
					let list = bter.BTER.initPrinter();
					for (let item of list) {
						item.value = item.address;
						item.text = item.name;
					}
					this.deviceList = JSON.parse(JSON.stringify(list));
					if (!list || list.length == 0) {
						this.msg = '没有可用的蓝牙设备';
					}
				});
			},
			reInitBlue() {
				this.deviceList = [];
				this.msg = '加载中，请稍后......';
				this.initBlue();
			},
			selectBlue(e) {
				let val = e.detail.value;
				getApp().globalData.deviceId = val;
				let obj = {
					address: val,
				};
				bter.BTER.connectBluetooth(obj);
				for (let one of this.deviceList) {
					if (one.address == val) {
						this.selectDeviceObj = one;
					}
				}
			},
			printCode() {
				let obj = {
					stackCode: '202310080002186512', //堆码
					projectNumber: 'YD230928', //项目号
					materialCode: 'SEW007812112', // 图号
					materialName: '立柱焊接T909L.2.11.2', //物料名称
				};
				let strCmd = zksdk.CreatCPCLPage(576, 400, 1, 0);
				strCmd += zksdk.addCPCLQRCode(340, 10, 'Q', 2, 7, obj.stackCode);
				strCmd += zksdk.addCPCLText(80, 20, '7', '2', 0, obj.stackCode);
				strCmd += zksdk.addCPCLText(10, 80, '7', '2', 0, '测试号:');
				strCmd += zksdk.addCPCLText(130, 80, '7', '2', 0, obj.projectNumber);
				strCmd += zksdk.addCPCLText(10, 160, '7', '2', 0, '测试图号:');
				strCmd += zksdk.addCPCLText(130, 160, '7', '2', 0, obj.materialCode);
				strCmd += zksdk.addCPCLText(10, 240, '7', '2', 0, obj.materialName);
				strCmd += zksdk.addCPCLGAP();
				strCmd += zksdk.addCPCLPrint();
				bter.BTER.printSomething(strCmd);
			},
			closeBlue() {
				this.deviceId = null;
				this.selectDeviceObj = {};
				bter.BTER.closeBluetooth();
			},
		},
	};
</script>

<style lang="scss">
	.litBtnCom {
		background: white;
		// padding: 20rpx 20rpx 0rpx;
		display: flex;
		justify-content: flex-end;
		color: #2979ff;
		font-weight: bold;
	}

	.contentBtn {
		padding: 20rpx;
		font-size: 34rpx;
		background-color: white;
		width: 680rpx;
		position: relative;
		border-radius: 10rpx;
	}

	.closeIcon {
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}

	.noMore {
		text-align: center;
		color: #888888;
	}

	.tabBtn {
		padding-top: 10rpx;
		color: #2979ff;

		view {
			padding: 10rpx;
		}
	}

	.u-radio {
		margin: 5rpx 0;
	}

	.radioList {
		max-height: 500rpx;
		overflow-y: auto;
		padding: 25rpx;
	}

	/deep/.checklist-box {
		display: block;
		width: 100%;
	}
</style>